<template>
  <div class="AddPlan">
    <div class="cus-title">
      <h4 v-if="state === 'edit'">编辑方案</h4>
      <h4 v-else-if="state === 'detail'">方案详情</h4>
      <h4 v-else>添加方案</h4>
    </div>
    <div class="cus-hearder">
      推广方案信息
    </div>
    <div class="sub-form">
      <el-form :model="BindForm" :rules="pattern">
        <el-form-item label="方案名称:" prop="schemeName">
          <el-col :span="20">
            <el-input
              v-model="BindForm.schemeName"
              :disabled="state == 'detail'"
              maxlength="20"
              minlength="1"
              placeholder="输入名称"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="分成方式:" required>
          <el-col :span="20">
            <div>
              <div>
                <el-radio
                  v-model="BindForm.proportionalShare"
                  :disabled="state == 'detail'"
                  label="1"
                  @change="szfcHandelChange"
                >按商品的设置分成</el-radio>
                <el-radio
                  v-model="BindForm.proportionalShare"
                  :disabled="state == 'detail'"
                  label="2"
                >按消费金额百分比</el-radio>
              </div>
              <p
                v-if="BindForm.proportionalShare == '2'"
                style="font-size:0.9rem;color:gray;margin:0;"
              >
                按用户消费订单金额的百分比进行分成。(订单金额需要减掉运费后在进行分成)
              </p>
            </div>
            <div v-if="BindForm.proportionalShare == '2'">
              <el-radio
                v-model="BindForm.dModeTypeId"
                :disabled="state == 'detail'"
                label="1"
                @change="dMode_2 = ''"
              >推广分成比例:
                <el-input-number
                  v-model="dMode_1"
                  :disabled="state == 'detail'||BindForm.dModeTypeId!='1'"
                  placeholder="输入分成百分比"
                  :controls="false"
                  :precision="0"
                  :min="0"
                  :max="100"
                  suffix-icon="iconfont icon-settingbaifenbi"
                />%</el-radio>
              <el-radio
                v-model="BindForm.dModeTypeId"
                :disabled="state == 'detail'"
                label="2"
                @change="dMode_1 = ''"
              >推广固定分成:
                <el-input-number
                  v-model="dMode_2"
                  :disabled="state == 'detail'||BindForm.dModeTypeId!='2'"
                  :controls="false"
                  :precision="2"
                  :min="0"
                  :max="1000000"
                  placeholder="输入分成金额"
                  suffix-icon="iconfont icon-settingyuan"
                />元</el-radio>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="允许自定义推广:" required>
          <el-col :span="20">
            <div>
              <el-radio
                v-model="BindForm.custom"
                :disabled="state == 'detail'"
                label="1"
              >是</el-radio>
              <el-radio
                v-model="BindForm.custom"
                :disabled="state == 'detail'"
                label="0"
              >否</el-radio>
            </div>
            <p style="font-size:0.9rem;color:gray;margin:0;">
              选择推广员是否可以自定义商品组合进行推广
            </p>
          </el-col>
        </el-form-item>
        <el-form-item label="可推广商品:" required>
          <el-col :span="20">
            <div>
              <el-radio
                v-model="BindForm.goodsType"
                :disabled="state == 'detail'"
                label="0"
                @change="changeGoodsType"
              >全部商品</el-radio>
              <el-radio
                v-model="BindForm.goodsType"
                :disabled="state == 'detail'"
                label="1"
                @change="changeGoodsType"
              >部分商品</el-radio>
              <el-radio
                v-model="BindForm.goodsType"
                :disabled="state == 'detail'"
                label="2"
                @change="changeGoodsType"
              >选中的商品不参与</el-radio>
            </div>
            <p v-if="BindForm.goodsType =='0' || BindForm.goodsType =='1'" style="font-size:0.9rem;color:gray;margin:0;">
              选择的商品可以进行推广
            </p>
            <p v-else style="font-size:0.9rem;color:gray;margin:0;">
              除选择的商品其他商品都可以进行推广
            </p>
            <el-table
              v-if="BindForm.goodsType == '1' || BindForm.goodsType == '2'"
              :data="Bindata"
              class="ele-table"
              :header-cell-style="handleCellStyle"
            >
              <el-table-column label="商品" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div class="cus-column-commodity">
                    <div class="left">
                      <TableColumnGoodsImage :src="scope.row.picUrl" :img-size="'60px'" />
                      <!--                      <img
                        :src="
                             scope.row.picUrl
                        "
                        alt=""
                      >-->
                    </div>
                    <div class="right">
                      <span
                        style="display:inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:80px;line-height: 60px;"
                      >{{ scope.row.name }}</span>
                      <span
                        v-if="
                          scope.row.goodsType == 'sale'
                        "
                      >售卖</span>
                      <span
                        v-if="
                          scope.row.goodsType == 'lease'
                        "
                      >租赁</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    style="color:red"
                    type="text"
                    :disabled="state == 'detail'"
                    @click="goodsRemove(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              v-if="BindForm.goodsType =='1' || BindForm.goodsType =='2'"
              type="text"
              :disabled="state == 'detail'"
              @click="addGoods"
            >添加商品</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="精选设置">
          <el-col :span="20">
            <el-form-item label="是否开启精选推荐" prop="ausleseShow">
              <el-radio
                v-model="BindForm.ausleseShow"
                :disabled="state == 'detail'"
                label="1"
                @change="changeGoodsType"
              >开启</el-radio>
              <el-radio
                v-model="BindForm.ausleseShow"
                :disabled="state == 'detail'"
                label="0"
                @change="changeGoodsType"
              >关闭</el-radio>
            </el-form-item>
            <p style="font-size:0.9rem;color:gray;margin:0;">
              开启后，使用该推广方案的推广员链接进入小程序时，可在小程序首页显示独立的推广精选模块。用于展示精选推广商品
            </p>
            <el-row v-if="BindForm.ausleseShow=='1'">
              <el-form-item label="精选标题" prop="ausleseBackgroundTitle">
                <el-input v-model="BindForm.ausleseBackgroundTitle" placeholder="输入标题" maxlength="6" />
              </el-form-item>
              <el-form-item>
                <p style="font-size:0.9rem;color:gray;margin:0;">
                  最多可输入6个字符
                </p>
              </el-form-item>
              <el-form-item label="精选描述" prop="ausleseBackgroundContent">
                <el-input v-model="BindForm.ausleseBackgroundContent" placeholder="输入描述" maxlength="14" />
              </el-form-item>
              <el-form-item>
                <p style="font-size:0.9rem;color:gray;margin:0;">
                  最多可输入14个字符
                </p>
              </el-form-item>
              <el-form-item label="精选背景图" prop="ausleseBackgroundImage">
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg,.png"
                  class="ele-col-upload"
                  :data="{path:path,fileType: 8}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadCommodityUrl"
                  :limit="limitCount"
                  :on-change="isOverLimit"
                  :on-remove="onRemove"
                  :class="{hide:hideUpload}"
                  :file-list="BindForm.ausleseBackgroundImage"
                >
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <el-form-item>
                <p style="font-size:0.9rem;color:gray;margin:0;">
                  建议尺寸: 708px X 184px
                </p>
              </el-form-item>
            </el-row>
          </el-col>
        </el-form-item>
        <el-form-item label="推广区域:" required>
          <el-col :span="20">
            <el-card shadow="never">
              <div slot="header" class="card-header">
                <el-button
                  size="mini"
                  :disabled="state == 'detail'"
                  @click="allSelect"
                >全部</el-button>
                <el-select
                  v-model="province"
                  :disabled="state == 'detail'"
                  size="mini"
                  filterable
                  @change="handelProvince"
                >
                  <el-option
                    v-for="(item, index) in pca.province"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
                <el-select
                  v-model="city"
                  :disabled="state == 'detail'"
                  size="mini"
                  filterable
                  @change="handelCity"
                >
                  <el-option
                    v-for="(item, index) in pca.forCiry"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
                <el-select
                  v-model="area"
                  :disabled="state == 'detail'"
                  filterable
                  size="mini"
                  @change="handelArea"
                >
                  <el-option
                    v-for="(item, index) in pca.forArea"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
              </div>
              <div class="ele-content">
                <div>
                  <el-radio
                    v-model="BindForm.storeType"
                    :disabled="state == 'detail'"
                    label="0"
                    @change="changeStoreType"
                  >全部门店</el-radio>
                  <el-radio
                    v-model="BindForm.storeType"
                    :disabled="state == 'detail'"
                    label="1"
                    @change="changeStoreType"
                  >部分门店</el-radio>
                </div>
              </div>
              <div v-if="BindForm.storeType==='1'">
                <el-table
                  ref="store"
                  :data="storeList"
                  :header-cell-style="handleCellStyle"
                  @selection-change="selectStore"
                >
                  <el-table-column type="selection" />
                  <el-table-column prop="id" label="门店ID" />
                  <el-table-column prop="storeName" label="商品名称" />
                </el-table>
                <div class="pagination-footer" style="display: flex;justify-content: space-between">
                  <el-button
                    style="height: 30px;margin-top: 10px;"
                    type="primary"
                    @click="$refs.store.toggleAllSelection()"
                  >全选</el-button>
                  <el-pagination
                    style="margin-top:10px"
                    :current-page="pages.pageIndex"
                    :page-sizes="pages.pageSizes"
                    :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pages.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-form-item>
        <el-form-item class="sub-footer">
          <el-button
            v-if="state != 'detail'"
            type="primary"
            @click="handelSubmit"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 商品列表 -->
    <select-extension-goods
      ref="selectExtensionGoods"
      :visible="visible"
      @handelClose="handelClose"
      @handelAllSelect="handelAllSelect"
    />
  </div>
</template>

<script>
import SelectExtensionGoods from '@/components/SelectExtensionGoods/goods_dialog.vue'
import { getCityList } from '@/api/auth'
import {
  schemeAdd,
  extensionGetStore,
  schemeEdit,
  schemeDetail, extensionList
} from '@/api/customAPI/shop/ExtensionManagement'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
import { uploadPath } from '@/api/upload'
export default {
  name: 'AddPlan',
  components: {
    SelectExtensionGoods,
    TableColumnGoodsImage
  },
  data() {
    var valiIcon = (rule, value, callback) => {
      if (!this.BindForm.ausleseBackgroundImage || this.BindForm.ausleseBackgroundImage.length <= 0) {
        callback(new Error('请上传商品图片'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      state: '',
      uploadPath,
      path: '/image',
      limitCount: 1,
      hideUpload: false,
      // 配送区域
      province: '',
      city: '',
      area: '',
      pCityArea: [],
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCiry: [],
        forArea: []
      },
      // ………………
      storeList: [],
      selection: [],
      Bindata: [],
      dMode_1: '',
      dMode_2: '',
      BindForm: {
        shopId: localStorage.getItem('shopId'),
        schemeName: '',
        proportionalShare: '1',
        dModeTypeId: '1',
        custom: '0',
        goodsType: '',
        storeType: '',
        dMode: '',
        storeId: '',
        goodsId: '',
        ausleseShow: '0',
        ausleseBackgroundTitle: null,
        ausleseBackgroundContent: null,
        ausleseBackgroundImage: []
      },
      pages: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        pageSizes: [20, 30, 40, 50]
      },
      pattern: {
        schemeName: [
          { required: true, max: 20, message: '请输入方案名', trigger: 'blur' }
        ],
        ausleseShow: [
          { required: true, message: '请选择是否开启精选推荐', trigger: ['change', 'blur'] }
        ],
        ausleseBackgroundTitle: [
          { required: true, message: '请输入精选标题', trigger: 'blur' }
        ],
        ausleseBackgroundContent: [
          { required: true, message: '请输入精选描述', trigger: 'blur' }
        ],
        ausleseBackgroundImage: [
          { required: true, validator: valiIcon }
        ]
      }
    }
  },
  watch: {
    'BindForm.goodsType': {
      handler(newValue, oldValue) {
        if (this.BindForm.goodsType === '0') {
          this.Bindata = []
          extensionList({
            shopId: localStorage.getItem('shopId'),
            commodityName: '',
            commdityType: '',
            commditySubType: '',
            commdityState: '',
            keySearch: '',
            page: 1,
            limit: 0
          }).then(inf => {
            const rowList = inf.data.data.data
            rowList.forEach(row => {
              this.Bindata.push({
                id: row.id,
                picUrl: row.goodsImg,
                name: row.goodsName,
                state: row.state,
                goodsType: row.type
              })
            })
          })
        } else {
          return
        }
      },
      deep: true,
      immediate: true
    },
    province(newValue, oldValue) {
      this.getStore()
    },
    city(newValue, oldValue) {
      this.getStore()
    },
    area(newValue, oldValue) {
      this.getStore()
    }
    /* 'BindForm.storeType': {
      handler(newValue, oldValue) {

      },
      deep: true,
      immediate: true
    }*/
  },
  created() {
    getCityList()
      .then(result => {
        this.pca.province = []
        this.pca.city = []
        this.pca.area = []
        result.data.data.forEach(inf => {
          this.pca.province.push(inf.province)
          inf.cityRegion.forEach(reg => {
            this.pca.city.push(reg.city) // 拿市区
            reg.village.forEach(vil => {
              this.pca.area.push(vil) // 拿城区
            })
          })
        })
      })
      .catch(err => {
        console.log(err)
      })
  },
  mounted() {
    const params = this.$dd(this.$route.query.p)
    this.state = params.state
    if (
      params.state === 'detail' ||
      params.state === 'edit'
    ) {
      this.getschemeDetail()
    }
  },
  activated() {
    const params = this.$dd(this.$route.query.p)
    this.state = params.state
    if (
      params.state === 'detail' ||
      params.state === 'edit'
    ) {
      this.getschemeDetail()
    }
  },
  methods: {
    /** 删除推广商品 */
    goodsRemove(row) {
      this.Bindata.forEach((item, index) => {
        if (item.id === row.id) {
          this.Bindata.splice(index, 1)
        }
      })
      if (this.Bindata && this.Bindata.length > 0) {
        this.getStore()
      }
    },
    handelAllSelect(list) {
      if (list.length > 0) {
        this.Bindata = []
        list.forEach(row => {
          this.Bindata.push({
            id: row.id,
            picUrl: row.picUrl,
            name: row.name,
            goodsType: row.goodsType
          })
        })
        if (this.BindForm.storeType.toString() === '1') {
          this.getStore()
        }
        this.handelClose()
      }
    },
    /** 编辑和详情初始化 */
    getschemeDetail() {
      const params = this.$dd(this.$route.query.p)
      schemeDetail({ schemeId: params.row.id }).then(inf => {
        this.BindForm.schemeName = inf.data.data.name
        this.BindForm.proportionalShare = inf.data.data.divideType.toString()
        this.BindForm.dModeTypeId = inf.data.data.consumptionType
          ? inf.data.data.consumptionType.toString()
          : ''
        this.BindForm.custom = inf.data.data.canCustomExtension.toString()
        this.BindForm.goodsType = inf.data.data.canCustomGoodsType.toString()
        this.BindForm.storeType = inf.data.data.canCustomStoreType.toString()
        var consumptionType = inf.data.data.consumptionType
          ? inf.data.data.consumptionType.toString()
          : ''
        if (consumptionType === '1') {
          this.dMode_1 = inf.data.data.consumptionPrice
        }
        if (consumptionType === '2') {
          this.dMode_2 = inf.data.data.consumptionPrice
        }
        if (inf.data.data.ausleseShow) {
          this.BindForm.ausleseShow = inf.data.data.ausleseShow.toString()
          if (inf.data.data.ausleseShow == 1) {
            this.BindForm.ausleseBackgroundTitle = inf.data.data.ausleseBackgroundTitle
            this.BindForm.ausleseBackgroundContent = inf.data.data.ausleseBackgroundContent
            this.BindForm.ausleseBackgroundImage = inf.data.data.ausleseBackgroundImage.split(',').map((item, index) => {
              return {
                name: 'image' + index,
                url: this.$parseImgUrl(item),
                imgUrl: item
              }
            })
          }
        }
        /* inf.data.data.goodsList.forEach(item =>{
          this.Bindata.push({
            id:item.id,
            picUrl: item.picUrl,
            name: item.name,
            goodsType: item.goodsType
          })
        })*/
        this.Bindata = inf.data.data.goodsList
        console.log(this.Bindata)
        if (inf.data.data.canCustomStoreType === 0) {
          this.storeList = inf.data.data.storeList
          const ids = []
          this.storeList.forEach(item => {
            ids.push(item.id)
          })
          this.BindForm.storeId = ids.toString()
        } else {
          const selectList = inf.data.data.storeList
          const list = []
          this.Bindata.forEach(inf => {
            list.push(inf.id)
          })
          extensionGetStore({
            provinceId: '',
            cityId: '',
            areaId: '',
            limit: this.pages.pageSize,
            page: this.pages.pageIndex,
            busiId: localStorage.getItem('shopId'),
            ids: list.toString()
          }).then(result => {
            this.storeList = result.data.data
            this.pages.total = result.data.data.total
            console.log(this.storeList)
            console.log(selectList)
            selectList.forEach(item => {
              this.storeList.forEach(inf => {
                if (item.id === inf.id) {
                  this.$nextTick(() => {
                    this.$refs.store.toggleRowSelection(inf)
                  })
                }
              })
            })
          }).catch(err => {
            console.log(err)
            this.pages.total = 0
          })
        }
      })
    },
    changeGoodsType() {
      this.Bindata = []
      this.storeList = []
      this.BindForm.storeId = ''
      this.BindForm.storeType = ''
    },
    changeStoreType() {
      this.BindForm.storeId = ''
      if (this.BindForm.storeType === '0') {
        if (this.Bindata.length > 0) {
          const list = []
          this.Bindata.forEach(inf => {
            list.push(inf.id)
          })
          extensionGetStore({
            provinceId: '',
            cityId: '',
            areaId: '',
            page: 1,
            limit: 0,
            busiId: localStorage.getItem('shopId'),
            ids: list.toString()
          }).then(result => {
            this.storeList = result.data.data.data
            this.pages.total = result.data.data.total
            const ids = []
            this.storeList.forEach(item => {
              ids.push(item.id)
            })
            this.BindForm.storeId = ids.toString()
          })
        }
      } else {
        if (this.Bindata.length > 0) {
          this.getStore()
        }
      }
    },
    /** 上传图片限制*/
    // 图片大小限制
    beforeAvatarUpload: function(file) {
      const isImg = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isSize = file.size / 1024 / 1024 < 2

      if (!isImg) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isSize) {
        this.$message.error('上传图片大小不能超过2MB!')
      }
      return isImg && isSize
    },
    uploadCommodityUrl(res, file) {
      file.imgUrl = res.data.relativePath
      this.BindForm.ausleseBackgroundImage.push(file)
    },
    /** 超出上传数量隐藏上传按钮*/
    isOverLimit(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
    },
    onRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.BindForm.ausleseBackgroundImage, item => item.uid === file.uid)
      if (index >= 0) {
        this.BindForm.ausleseBackgroundImage.splice(index, 1)
      }
    },
    /** 门店列表选择 */
    selectStore(v) {
      this.selection = v.map(inf => inf.id)
    },
    /** 添加商品 */
    addGoods() {
      this.visible = true
      if (this.Bindata.length > 0) {
        this.$refs.selectExtensionGoods.setSelectList(this.Bindata)
      }
    },
    /** 门店全部 */
    allSelect() {
      this.province = ''
      this.city = ''
      this.area = ''
      this.provinceCode = ''
      this.cityCode = ''
      this.areaCode = ''
      this.pca.forCiry = []
      this.pca.forArea = []
      if (this.BindForm.storeType === '1') {
        this.getStore()
      }
    },
    handleSizeChange(size) {
      this.pages.pageSize = size
      if (this.Bindata.length > 0) {
        this.getStore()
      }
    },
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      if (this.Bindata.length > 0) {
        this.getStore()
      }
    },
    /** 提交 */
    handelSubmit() {
      const params = this.$dd(this.$route.query.p)
      if (!this.BindForm.schemeName) {
        return this.$message.error('推广方案名称不能为空')
      }
      if (this.BindForm.proportionalShare == '2' && !this.BindForm.dModeTypeId) {
        return this.$message.error('消费金额百分比推广类型不呢为空')
      } else if (this.BindForm.proportionalShare == '2' && this.BindForm.dModeTypeId == '1' && !this.dMode_1) {
        return this.$message.error('推广分成比例的值不能为空')
      } else if (this.BindForm.proportionalShare == '2' && this.BindForm.dModeTypeId == '2' && !this.dMode_2) {
        return this.$message.error('推广固定分成的值不能为空')
      }
      if (!this.BindForm.custom) {
        return this.$message.error('允许自定义推广不能为空')
      }
      if (!this.BindForm.goodsType) {
        return this.$message.error('可推广商品类型不能为空')
      } else {
        if (this.BindForm.goodsType == '1' && this.Bindata.length == 0) {
          return this.$message.error('请添加可推广商品')
        } else if (this.BindForm.goodsType == '2' && this.Bindata.length == 0) {
          return this.$message.error('请添加不参与推广的商品')
        } else if (this.BindForm.goodsType == '0' && this.Bindata.length == 0) {
          return this.$message.warning('可推广商品不存在')
        }
      }
      if (!this.BindForm.storeType) {
        return this.$message.error('可推广区域不能为空')
      } else {
        if (this.storeList.length == 0) {
          return this.$message.warning('推广商品未关联门店')
        } else {
          if (this.BindForm.storeType == 1 && this.selection.length == 0) {
            return this.$message.error('未选择商品推广门店')
          }
        }
      }
      if (this.BindForm.ausleseShow == '1') {
        if (!this.BindForm.ausleseBackgroundTitle) {
          return this.$message.error('请输入精选标题')
        }
        if (!this.BindForm.ausleseBackgroundContent) {
          return this.$message.error('请输入精选描述')
        }
        if (!this.BindForm.ausleseBackgroundImage || this.BindForm.ausleseBackgroundImage.length == 0) {
          return this.$message.error('请上传精选背景图')
        }
      }
      if (this.BindForm.storeId || this.selection.length > 0) {
        this.BindForm.goodsId = this.Bindata.map(inf => inf.id).toString()
        if (this.BindForm.dModeTypeId === '1') {
          this.BindForm.dMode = this.dMode_1
        }
        if (this.BindForm.dModeTypeId === '2') {
          this.BindForm.dMode = this.dMode_2
        }
        if (this.state === 'add') {
          if (!this.BindForm.storeId) {
            this.BindForm.storeId = this.selection.toString()
          }
          const data = this.$XEUtils.clone(this.BindForm, true)
          if (data.ausleseShow == '0') {
            delete data.ausleseBackgroundTitle
            delete data.ausleseBackgroundContent
            delete data.ausleseBackgroundImage
          } else if (data.ausleseShow == '1') {
            if (data.ausleseBackgroundImage && data.ausleseBackgroundImage.length > 0) {
              data.ausleseBackgroundImage = this.BindForm.ausleseBackgroundImage[0].imgUrl.toString()
            }
          }
          schemeAdd(data)
            .then(result => {
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$message.success('成功')
              this.$router.go(-1)
            })
            .catch(err => {
              console.log(err)
            })
        } else if (this.state === 'edit') {
          this.BindForm.schemeId = params.row.id
          this.BindForm.shopId = localStorage.getItem('shopId')
          if (!this.BindForm.storeId) {
            this.BindForm.storeId = this.selection.toString()
          }
          console.log(this.BindForm)
          const data = this.$XEUtils.clone(this.BindForm, true)
          if (data.ausleseShow == '0') {
            delete data.ausleseBackgroundTitle
            delete data.ausleseBackgroundContent
            delete data.ausleseBackgroundImage
          } else if (data.ausleseShow == '1') {
            if (data.ausleseBackgroundImage && data.ausleseBackgroundImage.length > 0) {
              data.ausleseBackgroundImage = this.BindForm.ausleseBackgroundImage[0].imgUrl.toString()
            }
          }
          schemeEdit(data)
            .then(result => {
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$message.success('成功')
              this.$router.go(-1)
            })
            .catch(err => {
              console.log(err)
            })
        }
      } else {
        this.$message.warning('未选择门店')
      }
    },
    /** 区 */
    handelArea(v) {
      if (v) {
        if (this.BindForm.storeType === '1') {
          this.getStore()
        }
        this.areaCode = this.pca.area.find(inf => inf.id === v).code
      }
    },
    /** 市 */
    handelCity(v) {
      this.pca.forArea = []
      if (v) {
        this.pca.area.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forArea.push(inf)
          }
        })
        this.cityCode = this.pca.city.find(inf => inf.id === v).code
        if (this.BindForm.storeType === '1') {
          this.getStore()
        }
      }
    },
    /** 省 */
    handelProvince(v) {
      this.pca.forCiry = []
      this.pca.forArea = []
      this.city = ''
      this.area = ''
      if (v) {
        this.pca.city.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forCiry.push(inf)
          }
        })
        this.provinceCode = this.pca.province.find(inf => inf.id === v).code
        if (this.BindForm.storeType === '1') {
          this.getStore()
        }
      }
    },
    handelClose() {
      this.visible = false
    },
    /* handelAddRows(row) {
      console.log(row)
      if (this.Bindata.length > 0) {
        this.Bindata.forEach(inf => {
          console.log(inf)
          if (inf.id === row.goodsId) {
            return this.$message.warning('已存在')
          } else {
            this.Bindata.push({
              id: row.goodsId,
              picUrl: row.goodsImg,
              name: row.goodsName,
              state: row.state,
              goodsType: row.type
            })
            if (this.BindForm.storeType.toString() === '1') {
              this.getStore()
            }
            this.visible = false
          }
        })
      } else {
        this.Bindata.push({
          id: row.goodsId,
          picUrl: row.goodsImg,
          name: row.goodsName,
          state: row.state,
          goodsType: row.type
        })
        this.getStore()
        this.visible = false
      }
    },*/
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    /** 获取门店列表 */
    getStore() {
      const list = []
      /* extensionList({
          shopId: localStorage.getItem('shopId'),
          commodityName: '',
          commdityType: '',
          commditySubType: '',
          commdityState: '',
          keySearch: '',
          page: 1,
          limit: 0
        }).then(inf => {
          const row = inf.data.data.list
          this.Bindata.forEach(inf => {
            row.forEach(item => {
              if (item.goodsId !== inf.id) {
                list.push(item.goodsId)
              }
            })
          })
        })
      }else {*/
      this.Bindata.forEach(inf => {
        list.push(inf.id)
      })
      extensionGetStore({
        provinceId: this.provinceCode || '',
        cityId: this.cityCode || '',
        areaId: this.areaCode || '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSize,
        busiId: localStorage.getItem('shopId'),
        ids: list.toString()
      })
        .then(result => {
          this.storeList = result.data.data.data
          this.pages.total = result.data.data.total
        })
        .catch(err => {
          console.log(err)
          this.pages.total = 0
        })
    },
    szfcHandelChange() {
      this.dMode_2 = ''
      this.dMode_1 = ''
      this.BindForm.dModeTypeId = ''
    }
  }
  /* beforeRouteEnter(to, from, next) {
    if (to.params.state === 'edit') {
      to.meta.title = '编辑方案'
    } else if (to.params.state === 'detail') {
      to.meta.title = '方案详情'
    } else {
      to.meta.title = '添加方案'
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // ....
    this.$store.dispatch('tagsView/delView', from)
    next()
  }*/
}
</script>

<style lang="scss" scoped>
.AddPlan {
  padding: 50px 100px;
  .cus-hearder {
    font-size: 0.9rem;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    padding: 0px 20px;
    background: #f3f3f3;
  }
  .sub-form {
    ::v-deep.el-form {
      margin-top: 40px;
      .el-form-item__label {
        width: 140px;
        text-align: start;
      }
      .el-form-item__error {
        margin-left: 140px;
      }
      .el-form-item {
        padding-left: 20px;
        .el-input {
          width: 200px;
        }
        .ele-table {
          width: 400px;
          .cus-column-commodity {
            display: flex;
            align-items: flex-start;

            .left {
              width: 60px;
              height: 60px;
            }
            .right {
              margin-left: 30px;
              display: flex;
              flex-direction: column;
              span:last-child {
                font-size: 0.7rem;
                color: gray;
              }
            }
          }
        }
        .el-card {
          width: 600px;
          .card-header {
            display: flex;
            align-items: center;
            .el-button {
              height: 28px;
            }
            .el-input {
              width: 100px;
              margin: 0px 10px;
            }
          }
        }
      }
      .sub-footer {
        .el-button {
          margin-left: 140px;
          width: 100px;
          margin-top: 40px;
        }
      }
      .el-pagination .el-select .el-input {
        width: 100px !important;
      }
      .el-pagination__editor.el-input {
        width: 50px !important;
      }
    }
  }
  ::v-deep .hide {
    .el-upload--picture-card {
      display: none !important;
    }
  }
}
</style>
